<template>
  <ElDialog
    :model-value="visible"
    title="商户余额统计分析"
    width="80%"
    :before-close="handleClose"
    destroy-on-close
  >
    <div class="statistics-content">
      <!-- 统计概览 -->
      <ElRow :gutter="20" class="statistics-overview">
        <ElCol :span="6">
          <ElCard class="stat-card">
            <div class="stat-item">
              <div class="stat-value">{{ mockStats.totalMerchants }}</div>
              <div class="stat-label">商户总数</div>
            </div>
          </ElCard>
        </ElCol>
        <ElCol :span="6">
          <ElCard class="stat-card">
            <div class="stat-item">
              <div class="stat-value positive">
                ¥{{ formatCurrency(mockStats.totalBalance) }}
              </div>
              <div class="stat-label">余额总计</div>
            </div>
          </ElCard>
        </ElCol>
        <ElCol :span="6">
          <ElCard class="stat-card">
            <div class="stat-item">
              <div class="stat-value warning">
                {{ mockStats.lowBalanceCount }}
              </div>
              <div class="stat-label">余额不足</div>
            </div>
          </ElCard>
        </ElCol>
        <ElCol :span="6">
          <ElCard class="stat-card">
            <div class="stat-item">
              <div class="stat-value danger">
                {{ mockStats.negativeBalanceCount }}
              </div>
              <div class="stat-label">负余额</div>
            </div>
          </ElCard>
        </ElCol>
      </ElRow>

      <ElDivider>余额分布</ElDivider>

      <!-- 余额分布 -->
      <ElRow :gutter="20">
        <ElCol :span="12">
          <ElCard>
            <template #header>
              <span>余额区间分布</span>
            </template>
            <div class="balance-distribution">
              <div
                v-for="item in mockDistribution"
                :key="item.range"
                class="distribution-item"
              >
                <div class="range">{{ item.range }}</div>
                <div class="progress-bar">
                  <ElProgress
                    :percentage="item.percentage"
                    :show-text="false"
                  />
                </div>
                <div class="count">{{ item.count }}户</div>
              </div>
            </div>
          </ElCard>
        </ElCol>
        <ElCol :span="12">
          <ElCard>
            <template #header>
              <span>商户状态分布</span>
            </template>
            <div class="status-distribution">
              <ElRow :gutter="10">
                <ElCol :span="12">
                  <div class="status-item">
                    <ElTag type="success">正常</ElTag>
                    <span>{{ mockStats.normalCount }}户</span>
                  </div>
                </ElCol>
                <ElCol :span="12">
                  <div class="status-item">
                    <ElTag type="danger">冻结</ElTag>
                    <span>{{ mockStats.frozenCount }}户</span>
                  </div>
                </ElCol>
              </ElRow>
            </div>
          </ElCard>
        </ElCol>
      </ElRow>

      <ElDivider>热门商户</ElDivider>

      <!-- 热门商户表格 -->
      <ElCard>
        <template #header>
          <span>余额TOP10商户</span>
        </template>
        <ElTable :data="mockTopMerchants" size="small">
          <ElTableColumn type="index" label="排名" width="60" />
          <ElTableColumn prop="merchantName" label="商户名称" />
          <ElTableColumn prop="merchantCode" label="商户编码" />
          <ElTableColumn prop="currentBalance" label="当前余额" align="right">
            <template #default="{ row }">
              ¥{{ formatCurrency(row.currentBalance) }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="creditLimit" label="信用额度" align="right">
            <template #default="{ row }">
              ¥{{ formatCurrency(row.creditLimit) }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="status" label="状态" width="80">
            <template #default="{ row }">
              <ElTag
                :type="row.status === 1 ? 'success' : 'danger'"
                size="small"
              >
                {{ row.status === 1 ? "正常" : "冻结" }}
              </ElTag>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElCard>
    </div>

    <template #footer>
      <ElButton @click="handleClose">关闭</ElButton>
      <ElButton type="primary">导出报告</ElButton>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import { reactive } from "vue";

defineOptions({ name: "WmsMerchantBalanceStatisticsDialog" });

interface Props {
  visible: boolean;
}

defineProps<Props>();

const emit = defineEmits<{
  "update:visible": [visible: boolean];
}>();

// 模拟统计数据
const mockStats = reactive({
  totalMerchants: 156,
  totalBalance: 2856740.5,
  lowBalanceCount: 12,
  negativeBalanceCount: 3,
  normalCount: 142,
  frozenCount: 14,
});

// 模拟余额分布数据
const mockDistribution = [
  { range: "负余额", count: 3, percentage: 2 },
  { range: "0-1万", count: 45, percentage: 29 },
  { range: "1-5万", count: 67, percentage: 43 },
  { range: "5-10万", count: 28, percentage: 18 },
  { range: "10万以上", count: 13, percentage: 8 },
];

// 模拟TOP商户数据
const mockTopMerchants = [
  {
    merchantName: "华润超市",
    merchantCode: "M001",
    currentBalance: 156789.5,
    creditLimit: 200000,
    status: 1,
  },
  {
    merchantName: "沃尔玛",
    merchantCode: "M002",
    currentBalance: 134567.2,
    creditLimit: 150000,
    status: 1,
  },
  {
    merchantName: "家乐福",
    merchantCode: "M003",
    currentBalance: 98234.1,
    creditLimit: 100000,
    status: 1,
  },
  {
    merchantName: "大润发",
    merchantCode: "M004",
    currentBalance: 87456.3,
    creditLimit: 90000,
    status: 1,
  },
  {
    merchantName: "永辉超市",
    merchantCode: "M005",
    currentBalance: 76543.8,
    creditLimit: 80000,
    status: 1,
  },
];

const formatCurrency = (amount: number) => {
  return (
    amount?.toLocaleString("zh-CN", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    }) || "0.00"
  );
};

const handleClose = () => {
  emit("update:visible", false);
};
</script>

<style lang="scss" scoped>
.statistics-content {
  .statistics-overview {
    margin-bottom: 24px;

    .stat-card {
      .stat-item {
        text-align: center;

        .stat-value {
          font-size: 28px;
          font-weight: 600;
          color: var(--el-text-color-primary);
          margin-bottom: 8px;

          &.positive {
            color: var(--el-color-success);
          }

          &.warning {
            color: var(--el-color-warning);
          }

          &.danger {
            color: var(--el-color-danger);
          }
        }

        .stat-label {
          font-size: 14px;
          color: var(--el-text-color-secondary);
        }
      }
    }
  }

  .balance-distribution {
    .distribution-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      .range {
        width: 80px;
        font-size: 14px;
        color: var(--el-text-color-regular);
      }

      .progress-bar {
        flex: 1;
        margin: 0 12px;
      }

      .count {
        width: 40px;
        font-size: 14px;
        color: var(--el-text-color-secondary);
        text-align: right;
      }
    }
  }

  .status-distribution {
    .status-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      background: var(--el-fill-color-light);
      border-radius: 6px;
      margin-bottom: 12px;

      span {
        font-weight: 500;
      }
    }
  }
}
</style>
